import { AvatarGroup,Avatar } from "@nextui-org/react"
import Image from "next/image"
import { Button } from "@nextui-org/react"
function CourseItem(item){
    return (
        <div className="course_item_container w-[659px] card_background box-border px-[50px] pt-5 pb-10">
            <header className="course_item_header">
                <div className="course_item_tips flex justify-end">
                    @ {item.tips}
                </div>
                <div className="course_item_content flex">
                    <Image src={item.image} width={190} height={190} alt="course_image" />
                    <div className="course_item_message ml-[50px]">
                        <div className="title">{item.title}</div>
                        <div className="learn_message flex items-end mt-9">
                            <AvatarGroup isBordered>
                                {
                                    item.avatar.map((item,index)=>{
                                        return <Avatar src={item} key={index} size="sm"></Avatar>
                                    })
                                }
                            </AvatarGroup>
                            <div className="learn_title ml-2">{item.registerNum} 报名在学</div>
                        </div>
                    </div>
                </div>
            </header>
            <div className="button_group flex justify-center mt-[43px]">
              <Button color="primary" radius="full" size="lg" className="px-[56px] py-[16px] text-[28px] leading-none h-auto">立刻咨询</Button>
            </div>
        </div>
    )
}
export default function Course({ list }){
    return  (
        <div className="course_container flex">
            {
                list.map((item, index) => {
                    return <div className="course_item flex-auto" key={index}>
                        {
                            CourseItem(item)
                        }
                    </div>
                })
            }
        </div>
    )
}